<template>
    <div class="Yong">
        <div class="Yong_head">
            <input type="text" name="" id="" v-model="inp" placeholder="输入会员昵称"><button @click="sou">搜索</button>
        </div>
        <div class="Yong_main">
                <el-table
                id="tabll"
            :data="L_Yong_list"
            border
            style="width: 100% "
            align="center">
            <el-table-column
                prop="item.Dan_id"
                label="订单ID"
                width="180"
                align="center">
            </el-table-column>
            <el-table-column
                prop="item.name"
                label="会员昵称"
                width="180"
                align="center">
            </el-table-column>
            <el-table-column
                prop="item.qian"
                label="佣金金额"
                width="300"
                align="center">
            </el-table-column>
            <el-table-column
                prop="item.time"
                label="佣金产生时间"
                align="center">
            </el-table-column>
    </el-table>

        </div>
        <div class="Yong_foot">
            <div></div>
            <div class="block">
                <p>共{{L_Yong_list.length}}条</p>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="List.length"
            layout="prev, pager, next, jumper"
            :total="410">
            </el-pagination>
        </div>
        </div>
    </div>
</template>

<script>
var throttle = function(func, delay) {     
    var timer = null;     
    var startTime = Date.now();     
    return function() {             
        var curTime = Date.now();             
        var remaining = delay - (curTime - startTime);             
        var context = this;             
        var args = arguments;             
        clearTimeout(timer);              
        if (remaining <= 0) {                    
            func.apply(context, args);                    
            startTime = Date.now();              
        } else {                    
            timer = setTimeout(func, remaining);              
        }      
    }
}
function handle() {      
    console.log(Math.random());
} 
window.addEventListener('click', throttle(handle, 1000));
import {mapState} from 'Vuex'
export default {
    computed:{
        ...mapState('payinf',['L_Yong_list','List'])
    },
    data() {
        return {
            inp:"",//搜索框
            currentPage3: 5,
            num:5,//页面有几条数据
            ind:0,//初始页码
        }
    },
    created() {
        //获取初始数据
        this.$store.dispatch("payinf/L_Yong_Chu",{num:this.num,ind:this.ind})
    },
    methods: {
        //简单的模糊搜索
        sou(){
            if(this.inp!==""){
                this.$store.dispatch("payinf/L_Yong_Sou",{name:this.inp,num:this.num,ind:this.ind})
            }else{
                alert("请先输入您要搜索的内容")
            }
            this.inp=''
        },
        handleSizeChange(val) {
            this.ind=val
            this.$store.dispatch("payinf/L_Yong_Chu",{num:this.num,ind:this.ind})
            this.inp=''
        },
        handleCurrentChange(val) {
            this.ind=val
            this.$store.dispatch("payinf/L_Yong_Chu",{num:this.num,ind:this.ind})   
            this.inp=''
        }
    },
}
</script>

<style>
.Yong_head{
    margin-bottom: 50px;
}
.Yong_head>button{
    width: 80px;
    height: 30px;
    background: rgb(1, 183, 255);
    border:none;
    border: 1px solid #000;
    color: aliceblue;
}
.Yong_head>input{
    height: 30px;
    width: 200px;
}

.Yong_foot{
    display: flex;
    justify-content: space-between;
}
.Yong_foot>div{
    display: flex;
    margin-top: 20px;
}
/* .Yong_foot>div>p{
    position: fixed;
    bottom: 100px;
    right: 10px;
} */
</style>